<style>
			#userStatus, #history {
				font-family:verdana,helvetica;
				font-size:100%;
				font-size-adjust:none;
				font-stretch:normal;
				font-style:normal;
				font-variant:normal;
				font-weight:normal;
				line-height:normal;
				text-align:left;
				margin: 0px auto;
				position: relative;
			}
			#userStatus a {
				color: #9a9a9a;
				text-decoration: none;
			}
			#personalizer {
				width: 100%;
				background-color: #ffffca;
				z-index: 999;
				display: block;
				visibility: visible;
				position: relative;
				opacity: 1;
				height: 115px;
				padding-top: 0px;
				border-top-width: 0px;
				margin-top: 0px;
				padding-bottom: 0px;
				border-bottom-width: 1px;
				margin-bottom: 20px;
			}
			#personalizer a {
				cursor: pointer;
			}
			#personalizer div.margins {
				width: 100%;
				margin: 0px auto;
			}
			#userStatus {
				color: #000;
				height: 16px;
				background: #FFF6D2;
				font-size: 11px;
				width: 100%;
				border: solid #D3BCA7;
				border-width: 1px 0px;
				position: relative;
			}
			#history {
				background: #FCFBF0;
				margin: 0px;
				/*	padding: 6px 0px 6px 0px;	*/
				padding: 6px 0px;
				height: 80px;
				overflow: hidden;
			}
			#history div.iconbar {
				width: 837px;
				position: relative;
				float: left;
				margin: 0px 20px 0px 20px;
				_margin-left: 14px;
				height: 70px;
				overflow: hidden;
				/*	text-align: center;	*/
				position: relative;
				z-index: 5;
			}
			div.iconbar img {
				height: 40px;
				background: #fff;
				border: 1px solid #555;
				margin: 0px 6px;
				position: relative;
				z-index: 7;
				cursor: pointer;
				padding: 1px;
			}
			div.iconbar img:hover {
				border: 1px solid #00A0C6;
			}
			div.iconbar ul {
				height: 45px;
				padding: 3px;
				margin: 0px;
				width: 3000px;
				list-style: none;
			}
			div.iconbar ul li {
				float: left;
				overflow: hidden;
				height: 100px;
				_width: 69px;
				width: 69px;
				background: none !important;
				padding: 0px !important;
			}
			#historyTitle {
				border: none !important;
				float: left !important;
			}
			div.iconbar span.caption {
				/*	display: none;	*/
				position: relative;
				/*	top: -19px;	*/
				top: 1px;
				/*	border: 2px solid #fff;	*/
				padding: 0px;
				width: 40px;
				margin: 0px auto;
				z-index: 6;
				display: block;
				text-align:center;
				overflow: hidden;
			}
			#actionLinks {
				margin-top: 7px;
				width: 150px;
				float: left;
				text-align:center;
			}
			#actionLinks img, #optionLinks img {
				cursor: pointer;
				border: none;
			}
			#scrollRight, #scrollLeft {
				float:left;
				left:-20px;
				position:relative;
				top:-1px;
				cursor: pointer;
			}
			#scrollLeft {
				left:20px;
			}
/*	toolbox!	*/		

#toolboxHistory	#personalizer {
		position: relative;
		width: 332px;
		bottom: 0px;
		border: solid #D3BCA7;
		border-width: 0px 1px 1px 1px;
		overflow: hidden;
		background-color: #FCFBF0;
		margin-bottom: 20px;
	}
#toolboxHistory	#history {
		height: 130px;
	}
#toolboxHistory div.iconbar span.caption {
	margin-top: 1px;
}

#toolboxHistory #itemName {
	margin-left: 15px;
}
#toolboxHistory #actionLinks {
	width: 307px;
	margin-left: 170px !important;
	margin-left: 8px;
	margin-top: -2px;
	text-align: left;
}
#toolboxHistory #smallLinks{
	position: relative;
	top: -6px;
	left: 3px;
}
#toolboxHistory #smallLinks img {
	margin: 0px 2px;
}
	
#toolboxHistory #history div.iconbar {
	margin:0px 20px 0px 23px !important;
	margin-left: 11px;
	width:282px !important;
	width: 287px;
}

#toolboxHistory #scrollRight, #toolboxHistory #scrollLeft {
	cursor:pointer;
	position:absolute;
	right:19px !important;
	right: 15px;
	left: auto;
	top:5px;
	z-index:10;
}
#toolboxHistory #scrollLeft {
	left: 15px;
}
</style>

<div id="toolboxHistory">
		<div id="personalizer">
			<div id="userStatus">
				<div class="margins">
					<div id="historyStatus">
						<div id="itemName">
							<span class="fxMarquee" style="position: relative;"><b>Your product history</b></span>
						</div>
					</div>
				</div>
			</div>
			<div id="history">
				<div class="margins"><img width="8" height="53" id="scrollLeft" alt="scroll left" src="UserTests/UI/iconmenu/left_scroll.png"/>
					<div id="userHistoryBar" class="iconbar">
						<ul class="set" style="left: 0px;">
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31355103-2-60-0.gif" id="31355103"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32133413-2-60-0.gif" id="32133413"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32069546-2-60-0.gif" id="32069546"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32034088-2-60-0.gif" id="32034088"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32434432-2-60-0.gif" id="32434432"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31491515-2-60-0.gif" id="31491515"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31879261-2-60-0.gif" id="31879261"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32425829-2-60-0.gif" id="32425829"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/30895581-2-60-0.gif" id="30895581"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32309245-2-60-0.gif" id="32309245"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31861538-2-60-0.gif" id="31861538"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31684193-2-60-0.gif" id="31684193"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31756952-2-60-0.gif" id="31756952"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31660763-2-60-0.gif" id="31660763"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32085029-2-60-0.gif" id="32085029"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31355096-2-60-0.gif" id="31355096"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31414802-2-60-0.gif" id="31414802"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/31429517-2-60-0.gif" id="31429517"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32088045-2-60-0.gif" id="32088045"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32327766-2-60-0.gif" id="32327766"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32098288-2-60-0.gif" id="32098288"/><span class="caption">								
							<input type="checkbox"/></span></li>
							<li><img src="http://i.i.com.com/cnwk.1d/sc/32471222-2-60-0.gif" id="32471222"/><span class="caption">								
							<input type="checkbox"/></span></li>
						</ul>
					</div><img width="8" height="53" id="scrollRight" alt="scroll right" src="UserTests/UI/iconmenu/right_scroll.png"/>
					<div id="actionLinks">
							<img width="83" height="8" id="removeSelected" alt="remove selected" src="UserTests/UI/iconmenu/remove_selected.png"/>
							<img width="2" height="10" alt="|" src="/wiki/art/iconmenu/pipe.png"/>
							<img width="43" height="8" id="clearall" alt="clear all" src="/wiki/art/iconmenu/clear_all.png"/>
					</div>
				</div>
			</div>
		</div>
	</div>
	
<script>
var myIconMenu;
window.addEvent('domready', function(){
	myIconMenu = new IconMenu({
		//the list that contains all the 'icons'
		container: document.getElement('#userHistoryBar ul'), 
		//the images in the icons
		images: $$('#userHistoryBar img'), 
		//captions, if any; here I use the checkboxes as the caption - these are optional
		captions: $$('#userHistoryBar input'),
		removeLinks: $$('#history #removeSelected'),
		clearLinks: $$('#history #clearall'),
		//a function to execute when an item is selected
		onSelect: function(index, img){
			img.setStyle('border', '1px solid #77f');
		},
		//ditto, for deselect
		onDeSelect: function(index, img){
			img.setStyle('border', '1px solid #555');
		},
		onAdd: function(img, caption){
			//select any items that have their checkboxes already checked
			this.selectItem(this.imgs.indexOf(img), !!caption.get('checked'));
			//a function executed when the user clicks the image
			//or the checkbox
			var selectIt = function(img){
				this.selectItem(this.imgs.indexOf(img));
			}.bind(this);
			//add the event to the select input
			caption.addEvent('click', function(){
				selectIt(img);
			}.bind(this));
			//add the event to the image
			img.addEvent('click', function(){
				selectIt(img);
				caption.checked = img.hasClass('selected');
			}.bind(this));
		}
	});
});
</script>